<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>

    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <script type="text/javascript" src="http_cdn.bootcdn.net_ajax_libs_twitter-bootstrap_4.5.3_js_bootstrap.bundle.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <link type="text/css" rel="stylesheet" href="http_cdn.bootcdn.net_ajax_libs_twitter-bootstrap_4.5.3_css_bootstrap-grid.css">
    <script type="text/javascript" src="http_cdn.bootcdn.net_ajax_libs_jquery_3.5.1_jquery.js"></script>

    <style>
        .data {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>

    <script>

        $(function () {
            let data = {
                page: 1,
                size: 10
            };

            if (result.status === 200) {
                if (result.data.length > 0) {
                    for (let i = 0; i < result.data.length; i++) {
                        let category = result.data[i]
                        $("#content")
                            .append(
                                $("<tr>")
                                    .append(
                                        $("<td>")
                                            .text(i + 1)
                                            .addClass("text-center")
                                    )
                                //添加分类名称
                                .append(
                                    $("<td>")
                                        .text(category.name)
                                        .addClass("text-center")
                                )
                                .append(
                                    $("<td>")
                                        .append($("<button class='btn btn-info'>编辑</button>")).click(function () {
                                        window.location.href="category_editor.html?id=" + category.id
                                    }) .append($("<button class='btn btn-danger'>删除</button>")).click(function () {
                                        //发送post请求,删除数据
                                        $(this).parent("tr").remove()
                                    })
                                )
                                .append()
                                .append()
                            )
                    }
                } else {
                    $("#content")
                        .before($("<p>还没上架</p>"))
                        .hide();
                }
            }
        })
    </script>

</head>
<body>
<div class="row" style="background-color: pink;">
    <div class="col-md-4"><h2>美景家政信息平台</h2></div>
    <div class="col-md-4"></div>
    <div class="col-md-4">
            <span class="glyphicon glyphicon-off">

            </span>
    </div>
</div>

<div id="warp" class="row">
    <div class="data col-md-4">
        <h3>广告名称 <input type="text"></h3>
    </div>
    <div class="col-md-4">
        <h3>状态 <select>
            <option value="quanbu">全部</option>
            <option value="weishangjia">未上架</option>
            <option value="yishangjia">已上架</option>
            <option value="yixiajia">已下架</option>
        </select></h3>
    </div>
    <div class="col-md-4">
        <p>
            <button type="button" class="btn btn-primary">查询</button>
            <a href="index.html"><button type="button" class="btn btn-default">新建广告</button></a>
        </p>
    </div>
</div>
<table id="content" class="table table-bordered table-condensed">
    <tr>
        <th class="text-center">状态</th>
        <th class="text-center">广告名称</th>
        <th class="text-center">关联项目</th>
        <th class="text-center">有效期</th>
        <th class="text-center">访问人数</th>
        <th class="text-center">创建时间</th>
        <th class="text-center">操作</th>
    </tr>
</table>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <a href="#">首页</a>
        <a href="#">上页</a>
    </div>
    <div class="col-xs-6 col-md-4">
        <a href="#">下页</a>
        <a href="#">末页</a>
        <a href="#">刷新</a>
    </div>
    <div class="col-xs-6 col-md-4">共几条记录</div>
</div>
</div>
</body>
</html>